{extend name='wechat@api/review/main'}

{block name='content'}
<div class="container">
    {notempty name='news.articles'}
    {foreach $news.articles as $k => $v}
    {if $k < 1}
    <a href="{:url('@wechat/api.review/view/'.$v.id)}" style='background-image:url("{$v.local_url}")'>
        {if $v.title}<span>{$v.title}</span>{/if}
    </a>
    <div class="hr-line-dashed"></div>
    {else}
    <a href="{:url('@wechat/api.review/view/'.$v.id)}" class='other'>
        <span>{$v.title}</span>
        <span style='background-image:url("{$v.local_url}");'></span>
    </a>
    <div class="hr-line-dashed"></div>
    {/if}
    {/foreach}
    {else}
    <div class="info"><h3>404</h3> 访问资源不存在哦！</div>
    {/notempty}
</div>
{/block}

{block name='style'}


<style>

    .container {
        width: 90%;
        display: block;
        margin: 5vw auto;
        position: relative;
        border: 1px solid #ccc;
    }

    .container a {
        height: 50vw;
        display: block;
        background: no-repeat center center;
        background-size: cover;
        position: relative;
    }

    .container a span {
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        padding: 2vw;
        font-size: 2vw;
        max-height: 5em;
        position: absolute;
        margin: 0 -1px 0 -1px;
        line-height: 1.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, 0.7);
    }

    .container a.other {
        height: 15vw;
        display: block;
        padding: 1vw 2vw;
        position: relative;
    }

    .container a.other span:first-child {
        color: #333;
        float: left;
        width: 60vw;
        height: 10vw;
        overflow: hidden;
        max-height: none;
        position: relative;
        background: none;
        text-overflow: ellipsis;
    }

    .container a.other span:last-child {
        width: 16vw;
        height: 10vw;
        max-height: none;
        float: right;
        position: relative;
        background-size: cover;
        background-position: center center;
    }

    .info h3 {
        color: #333;
        font-size: 5vw;
    }

    .info {
        color: #666;
        padding: 3vw;
        font-size: 2vw;
        text-align: center;
        letter-spacing: 2px;
        text-shadow: #000 .05em .05em .05em;
    }

    .hr-line-dashed {
        margin: 6px 0 1px 0
    }

    .hr-line-dashed:last-child {
        display: none
    }

</style>

{/block}